import React from 'react';
import styled from 'styled-components';

// 为行程单元格设置样式
const CellWrapper = styled.div`
  background-color: ${props => (props.isCourse ? '#F7F7F7' : '#fff')};
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  
  /* 悬停效果 */
  &:hover {
    background-color: ${props => (props.isCourse ? '#e0e0e0' : '#f9f9f9')};
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* 选中的行程单元格，使用不同的颜色 */
  &.selected {
    background-color: #4A90E2;
    color: #fff;
  }
`;

const Cell = ({ time, day, course, onClick, id }) => (
  <CellWrapper isCourse={!!course} onClick={onClick} id={id}>
    {course ? (
      <span>{course.name}</span>
    ) : (
      <span style={{ color: '#888' }}> </span>
    )}
  </CellWrapper>
);

export default Cell;
